<template>
	<view>
		<view class="nav2">
			<u-navbar title="能力测评" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<u-gap height="20"></u-gap>
		<view class="m30">
			<view class="p30 radius30 bgFff flex-jus">
				<view class="c343 f28">进度</view>
				<view class="flex1 ml20 mr20">
					<u-line-progress :percentage="percentage" :showText="false" activeColor="#FFDE6D"
						height="8"></u-line-progress>
				</view>
				<view class="c343 f28">{{answerIndex + 1}}/{{listData.length}}</view>
			</view>
			<u-gap height="28"></u-gap>
			<view class="p30 radius30 bgFff" v-if="listData.length > 0">
				<view class="">
					<view class="c343 f46" style="line-height: 80rpx;letter-spacing: 4rpx;">{{answerIndex + 1}}.{{cur_subject.title}}</view>
					<u-gap height="28"></u-gap>
					<view class="">
						<view class="flex flex-start" @click="cur_subject.userDimension?'':chooseAnswer(cur_subject.dimensiona)">
							<view class="mt10">
								<u-icon v-if="cur_subject.userDimension && cur_subject.userDimension == cur_subject.dimensiona"
									name="checkmark-circle-fill" color="#FFDE6D" size="20"></u-icon>
								<u-icon v-else name="checkmark-circle"
									color="#ddd" size="20"></u-icon>
							</view>
							<text class="ml20 c343 f40" style="line-height: 50rpx;letter-spacing: 2rpx;">{{cur_subject.optiona}}</text>
						</view>
						<u-gap height="28"></u-gap>
						<view class="flex flex-start" @click="cur_subject.userDimension?'':chooseAnswer(cur_subject.dimensionb)">
							<view class="mt10">
								<u-icon v-if="cur_subject.userDimension && cur_subject.userDimension == cur_subject.dimensionb"
									name="checkmark-circle-fill" color="#FFDE6D" size="20"></u-icon>
								<u-icon v-else name="checkmark-circle"
									color="#ddd" size="20"></u-icon>
							</view>
							<text class="ml20 c343 f40" style="line-height: 50rpx;letter-spacing: 2rpx;">{{cur_subject.optionb}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view v-if="allAnswer">
				<u-button shape="circle" color="#FFDE6D" @click="creatReport"
					:customStyle="{'color':'#34314F','border':'1px solid #FFDE6D'}">
					生成报告
				</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getSubjects,
		getResult
	} from '@/common/api_character.js'
	export default {
		name: '',
		data() {
			return {
				listData: [],
				answerIndex: 0,
				cur_subject: {}
			}
		},
		onLoad(option) {
			this.getSubjects()
		},
		computed: {
			percentage() {
				let percentage = 20
				percentage = (this.answerIndex / (this.listData.length - 1)) * 100
				return percentage
			},
			allAnswer(){
				let status = false
				status = this.listData.every(item => item.userDimension)
				return status
			}
		},
		methods: {
			async getSubjects() {
				uni.showLoading()
				const res = await getSubjects()
				if (res.code == 200) {
					this.listData = res.data
					this.getCursubject()
					uni.hideLoading()
				}
			},
			getCursubject() {
				this.cur_subject = this.listData[this.answerIndex]
				console.log(this.answerIndex);
				console.log(this.cur_subject);
			},
			chooseAnswer(answer) {
				this.cur_subject.userDimension = answer
				if (this.answerIndex < (this.listData.length - 1)) {
					setTimeout(() => {
						this.answerIndex = this.answerIndex + 1
						this.getCursubject()
					}, 500)
				}
			},
			async creatReport(){
				uni.showLoading({
					mask:true
				})
				const res = await getResult(this.listData)
				uni.hideLoading()
				if(res.code == 200){
					uni.redirectTo({
						url:'/subpage/caractere/shareunlock?id='+res.data.id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}
</style>